<template>
	<view>
		<uni-popup ref="popup" type="center" @maskClick="closePopup()">
			<view class="login-box left clearfix relative">
				<view class="login-close absolute" @click="closePopup()">
					<uni-icons type="closeempty" color="#fff" size="18"></uni-icons>
				</view>
				
				<view class="login-title left clearfix">
					会员登录
				</view>
				
				<view class="login-content left clearfix">
					<view class="login-left left clearfix">
						<view class="login-left-title left clearfix">
							短信登录
						</view>
						
						<view class="login-input-box left clearfix" style="margin-top:30px;">
							<input placeholder="手机号" v-model="mobile" :focus="focus=='mobile'?true:false"/>
						</view>
						<view class="login-input-box left clearfix">
							<input placeholder="短信验证码" :focus="focus=='code'?true:false" v-model="code" style="border-right:1px solid #eee;width:70%;float:left;" />
							<view class="login-send-code right" v-if="sendStatus==false" @click="sendSms()">
								{{sendCodetext}}
							</view>
							<view class="login-send-code right" style="color:#999;" v-if="sendStatus==true">
								{{sendCodetext}}
							</view>
						</view>
						
						<view class="login-xieyi-box left clearfix">
							<label v-if="agreement == false" @click="agreement=true">
								<uni-icons type="icon-chenggong" size="20" color="#999" custom-prefix="iconfont"></uni-icons>
							</label>
							
							<label v-if="agreement == true" @click="agreement=false">
								<uni-icons type="icon-dui4" size="20" color="#2979ff" custom-prefix="iconfont"></uni-icons>
							</label>
							
							
							<label>
								我已阅读并同意 <span>魔方用户协议</span> <span>和隐私政策</span>
							</label>
							
						</view>
						<view class="login-errMssage left clearfix" v-if="errMssage">
							<uni-icons type="icon-cuowu10" size="15" color="red" custom-prefix="iconfont"></uni-icons> {{errMssage}}
						</view>
						<view class="login-errMssage left clearfix" v-else>
							
						</view>
						
						<view class="login-submit-box left clearfix" @click="submitAddForm()">
							登录/注册
						</view>
					</view>
					<view class="login-center left clearfix">
						
					</view>
					<view class="login-right right clearfix">
						<view class="login-left-title left clearfix" style="width:150px;margin-left:15px;">
							扫码登录
						</view>
						
						<view class="login-right-erweima left clearfix">
							<image src="/static/images/login-erweima.gif" mode="aspectFill"></image>
						</view>
						<view class="login-erweima-text left">
							魔方APP扫码登录
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>


<style scoped>
	.login-errMssage{width:100%;height:30px;line-heght:30px;text-align: center;color:red;margin-top:20px;font-size:14px;}
	.login-right-erweima image{width:150px;height:150px;border-radius: 10px;}
	.login-erweima-text{width:150px;line-height:20px;text-align: center;color:#999;font-size:14px;margin-left:15px;}
	.login-right-erweima{width:150px;height:150px;border-radius: 10px;border:1px solid #eee;margin:25px;margin-left:15px;margin-bottom:10px;}
	.login-submit-box{height:40px;line-height:40px;width:90%;margin-left:5%;background: #2468f2;background-image: -webkit-linear-gradient(top, #2468f2, #2468f2);border-radius: 8px;text-align: center;color:#fff;font-size:14px;margin-top:20px;cursor:pointer;}
	.login-xieyi-box label span{color:#2468f2;}
	.login-xieyi-box label{float:left;margin-right:5px;}
	.login-xieyi-box{width:90%;height:30px;line-height:30px;margin-left:5%;font-size:13px;margin-top:30px;}
	.login-send-code{width:28%;line-height:40px;height:40px;text-align: center;font-size:14px;color:#555;cursor:pointer;}
	.login-input-box input{line-height:20px;font-size:14px;color:#666;height:20px;margin-top:10px;}
	.login-input-box{border: 1px solid #d4d6d9;border-radius: 8px;font-size: 14px;height: 40px;line-height: 40px;width:calc(90% - 20px);margin-left:5%;padding-left:10px;padding-right:10px;margin-top:30px;}
	.login-left-title{width:100%;line-height:30px;font-size:16px;color:#444;font-weight:400;text-align: center;margin-top:30px;}
	.login-right{width:200px;height:400px;}
	.login-center{width:30px;height:400px;background:url('/static/images/ge-bj.png') no-repeat center center;background-size:30% 70%;}
	.login-left{width:330px;height:400px;margin-left:30px;margin-right:10px;}
	.login-content{width:100%;height:500px;margin-top:30px;}
	.login-title{width:100%;height:30px;font-size:25px;font-weight:500;text-align: center;margin-top:20px;color:#151b26;}
	.login-close{width:35px;height:35px;line-height:35px;text-align:center;border-radius: 50%;background:rgba(21, 27, 38, .6);top:0;right:-64px;cursor: pointer;}
	.login-box{width:600px;height:520px;background:#fff;border-radius: 12px;}
</style>

<script>
	var login = uniCloud.importObject('login',{customUI:true});
	var db = uniCloud.database();
	export default {
		name:"login",
		data() {
			return {
				mobile:'',//手机号码
				code:'',//验证码
				focus:null,//是否获取焦点
				sendStatus:false,
				sendCodetext:'发送验证码',
				sendCode:null,
				errMssage:'',
				agreement:true
			};
		},
		props:{
			show:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			"show"(val){
				if(val == false){
					this.$refs.popup.close();
				}else{
					this.$refs.popup.open();
				}
			}
		},
		mounted() {
			var that = this;
			var show = that.show;
			setTimeout(function(){
				if(show == false){
					that.$refs.popup.close();
				}else{
					that.$refs.popup.open();
				}
			},1000);
		},
		methods:{
			//发送手机验证码
			sendSms(){
				var that = this;
				var tel = this.mobile;
				if(!RegExp(/^1[3456789]\d{9}$/).test(tel)){
					this.errMssage = '请输入正确手机号码';
					this.focus = 'mobile';
					return false;
				}else{
					this.errMssage = '';
					this.focus = null;
				}
				uni.showLoading({
					title:'发送中···'
				});
				//调用云函数来发送手机验证码
				var code = parseInt(Math.random()*999999);
				console.log('code',code);
				that.sendCode = code;
				login.sendSms(tel,code).then(res=>{
					uni.hideLoading()
					var time = 60;
					var interval = setInterval(function(){
						if(time > 1){
							time--;
							that.sendCodetext = time+'重新获取';
							that.sendStatus = true;
						}else{
							that.sendStatus = false;
							that.sendCodetext = '发送验证码';
							clearInterval(interval);
						}
						
					},1000);
				}).catch(err=>{
					uni.hideLoading()
					uni.showToast({
						title: '发送过于频繁，请稍后再试！',
						duration: 2000,
						icon:'none'
					});
				});
				
			},
			//提交登录
			submitAddForm(){
				var that = this;
				var mobile = this.mobile;
				var code = this.code;
				var sendCode = this.sendCode;
				if(!this.isValidChineseMobile(mobile)){
					this.errMssage = '请输入正确的手机号码';
					this.focus = 'mobile';
					return false;
				}else{
					this.errMssage = '';
				}
				
				if(!code.length){
					this.errMssage = '请输入验证码';
					this.focus = 'code';
					return false;
				}else{
					this.errMssage = '';
				}
				
				if(this.agreement==false){
					this.errMssage = '请先阅读并同意协议';
					this.focus = null;
					return false;
				}else{
					this.errMssage = '';
				}
				
				if(sendCode != code){
					this.errMssage = '验证码错误';
					this.focus = 'code';
					return false;
				}
				uni.showLoading({
					title:'登录中'
				})
				db.collection('uni-id-users').where({mobile:mobile}).field('_id,username,avatar,nickname,register_date,mobile').get({getOne:true}).then(res=>{
					var data = res.result.data;
					if(data && data._id){
						that.setLogin(data);
					}else{
						//去注册
						that.register(mobile);
					}
				}).catch(err=>{
					//去注册
					that.register(mobile);
				});
				
			},
			//注册
			register(mobile){
				var that = this;
				var time = new Date().getTime();
				var data = {
					username:mobile,
					nickname:'未设昵称',
					mobile:mobile,
					avatar:'https://mp-2298d5e4-aa54-4efc-a8b7-bbb75295a007.cdn.bspapp.com/ai-header/10.webp',
					last_login_date:time,
					dcloud_appid:['__UNI__4FD14A1']
				}
				
				db.collection('uni-id-users').add(data).then(res=>{
					data._id = res.result.id;
					that.setLogin(data);
				})
			},
			//缓存登录数据
			setLogin(data){
				var that = this;
				//缓存数据
				uni.setStorage({
					key:'login-userinfo',
					data:data,
					success:function(){
						uni.hideLoading();
						uni.showToast({
							title:'登录成功',
							icon:'none',
							duration:2000
						})
						
						setTimeout(function(){
							that.$emit('confirm',data);
							location.reload();
							that.closePopup();
						},2000);
					}
				})
				
			},
			//验证手机号码
			isValidChineseMobile(mobile) {
			    // 正则表达式匹配中国的手机号码
			    const regex = /^1[3-9]\d{9}$/;
			    return regex.test(mobile);
			},
			//关闭弹窗
			closePopup(){
				this.$refs.popup.close();
				this.$emit('close',false);
			}
		}
	}
</script>
